<template>
  <div id="building">
    <div class="login-container">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-position="left"
        label-width="80px"
        class="demo-ruleForm login-page"
      >
        <div>
          <router-link to="/login">◀返回登录界面</router-link>
        </div>
        <h3 class="title" style="color: white">用户注册</h3>
        <el-form-item label="用户名" prop="name">
          <el-input type="text" v-model="ruleForm.name" placeholder="用户名">
            <template
              #suffix
              v-if="ruleForm.name != null && ruleForm.name != ''"
            >
              <template v-if="userIsExist">
                <el-tooltip content="当前用户名可以使用" placement="right">
                  <el-icon class="el-input__icon" color="green" :size="20"
                    ><circle-check-filled
                  /></el-icon>
                </el-tooltip>
              </template>
              <template v-if="!userIsExist">
                <el-tooltip content="当前用户名已被注册" placement="right">
                  <el-icon class="el-input__icon" color="red" :size="20"
                    ><circle-close-filled
                  /></el-icon>
                </el-tooltip>
              </template>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            placeholder="密码"
          ></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="password2">
          <el-input
            type="password"
            v-model="ruleForm.password2"
            placeholder="确认密码"
          ></el-input>
        </el-form-item>

        <el-form-item label="手机号码" prop="phoneNum">
          <el-input
            type="text"
            v-model="ruleForm.phoneNum"
            placeholder="手机号码"
          ></el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input
            type="email"
            v-model="ruleForm.email"
            placeholder="请输入邮箱地址"
          ></el-input>
        </el-form-item>

        <el-form-item label="所属单位" prop="unit">
          <el-input
            type="text"
            v-model="ruleForm.unit"
            placeholder="请输入所属单位"
          ></el-input>
        </el-form-item>

        <el-form-item style="width: 100%">
          <el-button
            type="primary"
            style="width: 100%"
            @click="handleSubmit('ruleForm')"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import router from "../router/index.js";
import axios from "../utils/request";
import { ElNotification } from "element-plus";
import utilFunc from "../utils/checkFuncs";
import { CircleCheckFilled, CircleCloseFilled } from "@element-plus/icons-vue";
export default {
  components: { CircleCloseFilled, CircleCheckFilled },
  data() {
    return {
      ruleForm: {
        name: "",
        password: "",
        password2: "",
        phoneNum: "",
        email: "",
        unit: "",
      },
      userIsExist: false,
      rules: {
        name: [
          { required: true, validator: this.validateName, trigger: "blur" },
        ],
        password: [
          { required: true, validator: this.validatePwd, trigger: "blur" },
        ],
        password2: [
          { required: true, validator: this.validatePwd2, trigger: "blur" },
        ],
        phoneNum: [
          { required: true, validator: this.validatePhone, trigger: "blur" },
        ],
        email: [
          { required: true, validator: this.validateEmail, trigger: "blur" },
        ],
        unit: [
          { required: true, validator: this.validateCompany, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //表单提交函数
    handleSubmit(event) {
      if (!this.userIsExist) {
        return false;
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          axios.post("/register", this.ruleForm).then((res) => {
            ElNotification.success(res.data.messgae);
            if (res.data.state == 200) {
              router.push("/login");
            }
          });
        } else {
          return false;
        }
      });
    },
    /**
     * 检查用户名是否可用
     */
    theUserNameIsExist(userName) {
      let _this = this;
      axios
        .get("/theUserIsExit", { params: { userName: userName } })
        .then((res) => {
          if (res.data.status == 200) {
            _this.userIsExist = true;
          } else {
            _this.userIsExist = false;
          }
        });
    },

    /**
     * 表单验证函数
     */
    validateName(rule, value, callback) {
      if (value === "") {
        callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    },
    validatePwd(rule, value, callback) {
      if (value === "") {
        callback(new Error("密码不能为空"));
      } else {
        callback();
      }
    },
    validatePwd2(rule, value, callback) {
      if (value === "") {
        callback(new Error("密码不能为空"));
      } else if (value != this.ruleForm.password) {
        callback(new Error("两次密码不一致"));
      } else {
        callback();
      }
    },
    validatePhone(rule, value, callback) {
      if (value === "") {
        callback(new Error("电话不能为空"));
      } else {
        if (utilFunc.thePhoneIsTure(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的电话号码"));
        }
      }
    },
    validateEmail(rule, value, callback) {
      if (value === "") {
        callback(new Error("邮箱不能为空"));
      } else {
        if (utilFunc.theEmailIsTrue(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的电子邮箱"));
        }
      }
    },
    validateCompany(rule, value, callback) {
      if (value === "") {
        callback(new Error("所属单位不能为空"));
      } else {
        callback();
      }
    },
  },
  watch: {
    "ruleForm.name"() {
      //调用后台接口验证用户名合法性
      this.theUserNameIsExist(this.ruleForm.name);
    },
  },
  ruleForm: {
    eleDateNew() {
      return JSON.parse(JSON.stringify(this.FormData));
    },
  },
};
</script>

<style scoped>
.login-container {
  /* width: 100%;
    height: 100%; */
  position: absolute;
  left: 12%;
  top: 0.1%;
}
.login-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 50px auto;
  width: 350px;
  padding: 35px 35px 15px;
  background: rgba(7, 7, 7, 0);
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
label.el-checkbox.rememberme {
  margin: 0px 0px 15px;
  text-align: left;
}

#building {
  background: url("../assets/backgroud.png");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
</style>